<template>
  <el-table
    class="matrix-table"
    v-loading="loading"
    :data="dataSource"
    size="small"
    border
    fit
    @cell-click="onCellClick"
  >
    <template v-for="(column, index) in columns" >
      <el-table-column
        :key="column.key || index"
        :label="column.title"
        :width="column.width"
        :min-width="column.minWidth"
        :fixed="column.fixed"
        :show-overflow-tooltip="column.showOverflowTooltip"
        :align="column.align"
        :header-align="column.headerAlign"
        :selectable="column.selectable"
        :reserve-selection="column.reserveSelection"
      >
        <template slot-scope="scope">
          <div
            class="column-cell"
            :class="{
              'is-disabled': disabledClick(column.dataIndex, scope.row.readOnlyField),
              'hide-text': disabledClick(column.dataIndex, scope.row.hideFields),
              'is-active': selectColumnId === (scope.$index + '-' + index),
              'is-red': scope.row.redMark.indexOf(column.dataIndex) > -1,
            }"
            :data-index="scope.$index + '-' + index"
            :data-field-name="column.dataIndex"
          >
            {{ scope.row[column.dataIndex] }}
          </div>
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>

<script>
import _ from 'lodash';
import { addClass, removeClass, hasClass } from './utils';

export default {
  name: 'matrix-table',
  props: {
    loading: {
      type: Boolean,
      default: false,
    },
    columns: {
      type: Array,
      required: true,
    },
    dataSource: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      selectColumnId: null,
    };
  },
  watch: {
    columns: {
      handler(list) {
        if (list) {
          list.forEach(item => {
            item.minWidth = item.minWidth || '100px';
            if (_.isUndefined(item.showOverflowTooltip)) {
              // 默认超出部分 tooltip 提示
              item.showOverflowTooltip = true;
            }
            item.align = 'center';
            item.headerAlign = 'center';
          });
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    disabledClick(field, fieldList) {
      return fieldList.includes(field);
    },

    onCellClick(row, column, cell) {
      const columnCell = cell.querySelector('.column-cell');
      const dataIndex = columnCell.getAttribute('data-index');
      const dataFieldName = columnCell.getAttribute('data-field-name');
      if (hasClass(columnCell, 'is-disabled') || this.selectColumnId === dataIndex) {
        return;
      }

      // this.selectColumnId = (this.selectColumnId === dataIndex) ? '' : dataIndex;
      this.selectColumnId = dataIndex;
      let params = { fieldName: dataFieldName };
      if (this.selectColumnId) {
        let arr = dataIndex.split('-');
        Object.assign(params, { row, column, cell, rowIndex: Number(arr[0]), columnIndex: Number(arr[1]) });
        this.$emit('cell-select', params);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
$colHeight: 40px;

.matrix-table {
  width: 100%;

  ::v-deep .el-table__header {
    th.el-table__cell {
      background-color: #F2F2F2;
      border-color: #ddd;
      height: $colHeight;
    }
  }

  ::v-deep td.el-table__cell {
    border-color: #ddd;
    padding: 0;
    height: $colHeight;

    .cell {
      padding: 0;
      height: $colHeight;
    }
  }

  ::v-deep .el-table__fixed-body-wrapper {
    td:not(.is-hidden).el-table__cell {
      background-color: transparent;

      .column-cell {
        background-color: #F2F2F2;
      }
    }
  }

  .column-cell {
    padding: 8px 12px;
    height: $colHeight;
    border: 1px solid transparent;

    &.is-disabled {
      background-color: #F2F2F2;
    }

    &.hide-text {
      font-size: 0;
    }

    &:not(.is-disabled).is-active {
      border-color: #409eff;
    }

    &.is-red {
      background-color: #F5E6E8;
    }

    &:not(.is-disabled):hover {
      border-color: #409eff;
      cursor: pointer;
    }
  }
}
</style>
